<template>
	<view class="home_container">
		<view class="search">
			<my-search></my-search>
		</view>
		
		<!-- 轮播图 -->
		<view class="swiper_warp">
			<swiper :autoplay="true" :interval="3000" :duration="1000" :circular="true" :current="current"
				@change="getCurrent">

				<swiper-item v-for="(item,i) in swiperList" :key="i">

					<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
						<image :src="item.image_src"></image>
					</navigator>

				</swiper-item>

			</swiper>
			<view class="points">
				<view v-for="item,i in swiperList" :key="i" :class="['dot',current == i ? 'active' :'']">
				</view>
			</view>
		</view>
		<!-- 导航栏 -->
		<viev class="nav">
			<view class="nv_item" v-for="item,i in navList" :key="i" @click="navHandle(item)">
				<image :src="item.image_src"></image>

			</view>
		</viev>


		<view class="floor">
			<view class="fl_item" v-for="item,i in floorList" :key="i">
				<view class="fl_title">
					<view class="title">
						<image :src="item.floor_title.image_src" alt="" mode="widthFix">
					</view>

				</view>
				<view class="com">
					<view class="left">
						<navigator :url="item.product_list[0].url" class="l_img">
							<image :src="item.product_list[0].image_src" alt="" >

						</navigator>
					</view>
					<view class="right" >
						<navigator 
						:url="ele.url"
						class="r_img" v-if=" index != 0" v-for="ele,index in item.product_list" :key="index">
							<image :src="ele.image_src" alt="">
						</navigator>

					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		 mixins: [badgeMix],
		data() {
			return {
				current: 0,
				duration: 1000,
				indicatorDots: true,
				swiperList: [],
				navList: [],
				floorList: []
			};
		},
		onLoad() {
			this.getSwiperList()
			this.getNav()
			this.floorData()
		},
		methods: {
			// 获取轮播图数据
			async getSwiperList() {


				// 3.1 发起请求
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/home/swiperdata')
				// 3.2 请求失败
				if (res.meta.status !== 200) {
					return uni.$showMsg()
				}
				// 3.3 请求成功，为 data 中的数据赋值
				this.swiperList = res.message
			},

			async getNav() {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/home/catitems')
				// 3.2 请求失败
				if (res.meta.status !== 200) {
					return uni.$showMsg()
				}

				this.navList = res.message
			},

			async floorData() {
				// 3.1 发起请求
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/home/floordata')
				// 3.2 请求失败
				if (res.meta.status !== 200) {
					return uni.$showMsg()
				}
				// 3.3 请求成功，为 data 中的数据赋值
				 res.message.forEach(floor => {
				    floor.product_list.forEach(prod => {
				      prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
				    })
				  })

				this.floorList = res.message
			},

			navHandle(item) {
				console.log(item)
				if (item.name == "分类") {
					uni.switchTab({
						url: "/pages/cate/cate"
					})
				}
			},
			// 自定义导航点
			getCurrent(e) {
				// @bindchange="getCurrent"

				this.current = e.detail.current
			}
		},





	}
</script>

<style lang="scss" scoped>
	.swiper_warp {
		position: relative;

		swiper {
			height: 165px;

			.swiper-item,
			image {
				width: 100%;
				height: 100%;
			}
		}

		.points {
			position: absolute;
			bottom: 10px;
			right: 10px;
			display: flex;

			.dot {
				width: 7.5px;
				height: 7.5px;
				margin: 0 2px;
				background-color: #FFFFFF;
				border-radius: 3.75px;
				opacity: .7;
				transition: all .3s ease;
			}

			.dot.active {
				width: 15px;
				background-color: #f50;
				opacity: 1;
			}
		}
	}




	.nav {
		display: flex;
		padding: 0 40rpx;
		margin: 36rpx 0;
		justify-content: space-between;

		.nv_item {

			>image {
				width: 120rpx;
				height: 120rpx;
				text-align: center;
			}
		}
	}


	.floor {
		padding: 0 16rpx;

		.fl_item {
			margin-bottom:26rpx ;
			.fl_title {
				height: 60rpx;

				.title {
					height:100%;
					width: 100%;
					>image {
						height: 100%;
						width: 100%;
					}
				}

			}
			.com{
				display: flex;
				height: 340rpx;
				.left,.right{
					height: 100%;
				}
				.left{
					margin-right: 9rpx ;
					width: 33.33%;
					height: 100%;
					.l_img{
						width: 100%;
						height: 100%;
						image{
							display:block;
							width: 100%;
							height: 100%;
						}
					}
					
				}
				.right{
					width: 66.66%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.r_img{
						margin-top: 6rpx;
						width: 49%;
						height: 49%;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.r_img:nth-child(1){
						margin-top: 0;
					}.r_img:nth-child(2){
						margin-top: 0;
					}
				}
			}
		}
	}


.search{
	position: sticky;
	top: 0;
	z-index: 999;
}

</style>
